<template>
    <section class="ContactUs-section">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h2>Contact Us</h2>
                    <h1>
                        <p class="clearfix">
                            <i class="iconfont icon-gongsizhuye"></i> 联系我们
                        </p>
                    </h1>
                </div>
            </div>
        </article>
        <!--联系我们-->
        <div class="content">
            <div class="container">
                <article class="clearfix">
                    <a-row>
                        <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10"  >
                            <aside class="img-shadow">
                                <div class="city-img-bg-box">
                                    <div class="inside">
                                        <p>Beijing</p>
                                    </div>
                                </div>
                                <img src="/static/img/beijing-company-address.jpg" class="company-address-img" title="北京公司总部：北京市东城区朝阳门银河soho-D座8层50815" alt="北京公司总部：北京市东城区朝阳门银河soho-D座8层50815">
                            </aside>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                            <aside>
                                <h4><i class="iconfont icon-dingwei2"></i> 北京公司总部：北京市东城区朝阳门银河soho-D座8层50815</h4>
                                <p>
                                    <i class="iconfont icon-lianxiwomen"></i>
                                    联系电话：400-600-4982
                                </p>
                                <p>
                                    <i class="iconfont icon-dkw_youxiang"></i>
                                    联系邮箱：429461542@qq.com
                                </p>
                                <p>
                                    <i class="iconfont icon-duanxin-cehua-xinxixiangqing"></i>
                                    邮 编：100010
                                </p>
                                <p>
                                    <i class="iconfont icon-ditie"></i>
                                    地铁线路：地铁2号线、6号线朝阳门站G口出，进入银河SOHO，D座写字楼坐低区电梯上8层。
                                </p>
                                <p>
                                    <i class="iconfont icon-gongjiaoche"></i>
                                    公交线路：101路; 109路; 110路; 112路; 202路夜班车; 420路; 609路朝阳门内下车即到。
                                </p>
                                <p>
                                    <i class="iconfont icon-che"></i>
                                    自驾线路：沿二环行驶2.2公里，过朝阳门桥直行；继续沿二环行驶280米，从金宝街出口离开稍向右转进入朝阳门南大街；
                                    沿朝阳门南大街行驶170米，右转进入金宝街；沿金宝街行驶80米，过右侧的梓峰大厦约60米后，右转进入小牌坊胡同；
                                    沿小牌坊胡同行驶110米，过右侧的梓峰大厦约300米后，左转进入大方家胡同；沿大方家胡同行驶10米即到。
                                </p>
                            </aside>
                        </a-col>
                    </a-row>
                </article>

                <article class="clearfix shanghai">
                    <a-row>
                        <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10"  >
                            <div class="img-shadow">
                                <div class="city-img-bg-box">
                                    <div class="inside">
                                        <p>Shanghai</p>
                                    </div>
                                </div>
                                <img src="/static/img/shanghai-company-address.jpg" class="company-address-img" title="上海分公司地址：上海市静安区南京西路580号仲益大厦A座701" alt="上海分公司地址：上海市静安区南京西路580号仲益大厦A座701">
                            </div>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                            <aside>
                                <h4><i class="iconfont icon-dingwei2"></i> 上海分公司地址：上海市静安区南京西路580号仲益大厦A座701</h4>
                                <p>
                                    <i class="iconfont icon-lianxiwomen"></i>
                                    联系电话：18621290395
                                </p>
                                <p>
                                    <i class="iconfont icon-duanxin-cehua-xinxixiangqing"></i>
                                    邮 编：200040
                                </p>
                                <p>
                                    <i class="iconfont icon-ditie"></i>
                                    地铁路线：南京西路地铁站：13号线11号口，2号线2号口，12号线14号口，往上海电视台方向走，南京西路580号仲益大厦低层区A座7楼701室。
                                </p>
                                <p>
                                    <i class="iconfont icon-gongjiaoche"></i>
                                    公交路线：成都北路南京西路站，20路，112路，330路，36路，869路，933路，974路，下车后斜对面。
                                </p>
                            </aside>
                        </a-col>
                    </a-row>
                </article>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {}
        },
        metaInfo () {
            return {
                title: '联系我们_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '华美优胜公司地址，华美优胜公司联系方式，华美优胜地址' },
                    { vmid: 'description', name: 'description', content: '华美优胜公司地址，华美优胜公司联系方式，华美优胜地址' },

                ],
            }
        },
        activated(){
        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {},
        components: {
            'app-header': Header,
            BackTop,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background-color: #fff;
        .ContactUs-section {
            //背景图
            .bg-box{
                background: url(/static/img/ConsultantTeam5.jpg) no-repeat center center;
                background-size: 100%;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    > .container {
                        padding: 150px 0;
                        text-align: center;
                        > h2 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        > h1 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            > p {
                                display: inline-block;
                                > i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }

            .content {
                background: #fff;
                > .container {
                    padding: 30px;
                    text-align: center;
                    >article{
                        margin: 50px 0;
                        text-align: left;
                        .img-shadow{
                            padding: 0;
                            >div{
                                height: 330px;
                                position: relative;
                                background: url(/static/img/beijing.jpg) no-repeat center center;
                                background-size: 100% 100%;
                                >.inside{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    background: #000;
                                    opacity: .4;
                                    color: #e4e4e4;
                                    font-size: 20px;
                                    >p{
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        -webkit-transform: translate(-50%, -50%);
                                        -moz-transform: translate(-50%, -50%);
                                        -ms-transform: translate(-50%, -50%);
                                        -o-transform: translate(-50%, -50%);
                                        transform: translate(-50%, -50%);
                                    }
                                }
                            }
                            img.company-address-img{
                                width: 100%;
                                height: 100%;
                                display: none;
                            }
                        }
                        .img-shadow:hover{
                            >div{
                                display: none;
                            }
                            >img.company-address-img{
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                        aside{
                            text-align: left;
                            padding: 0 0 0 30px;
                            >h4{
                                font-size: 18px;
                            }
                            >p{
                                margin: 5px 0;
                                >i{
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                    article.shanghai{
                        .img-shadow{
                            >div{
                                height: 234px;
                                background: url(/static/img/shanghai.jpg) no-repeat center center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
